<template>
  <div>
    <cus-search style="min-width: 1200px;">
      <cus-search-item>
        <Form
          :model="form"
          :label-width="80"
          ref="formValidate"
          @keydown.native.enter.prevent="onInit"
        >
          <FormItem label="消耗日期" class="mr_48 mb_20">
            <DatePicker
              type="daterange"
              transfer
              ref="formDate"
              v-model="dateStr"
              format="yyyy-MM-dd"
              @on-change="sDateChange"
              placeholder="开始日期 - 结束日期"
              style="width: 200px"
            />
          </FormItem>
          <FormItem label="物资分类" class="mr_48 mb_20" prop="goodsTypeName">
            <Select
              size="large"
              placeholder="请选择物资分类"
              v-model="form.goodsTypeName"
              clearable
              style="width: 200px;"
            >
              <Option
                v-for="item in materialTypeList"
                :value="item.categoryName"
                :key="item.categoryName"
              >
                {{ item.categoryName }}</Option
              >
            </Select>
          </FormItem>
          <FormItem label="物资名称" class="mr_48 mb_20" prop="productName">
            <Input
              clearable
              placeholder="请输入物资名称"
              v-model="form.productName"
              style="width: 200px"
            />
          </FormItem>
          <cusButton
            class="mr_20 mb_20"
            type="primary"
            @onClick="
              pages.page = 1;
              getPoinventroyConsumeListApi();
            "
            >查询</cusButton
          >
          <cusButton class="mr_20 mb_20" type="primary" @onClick="reset()"
            >重置</cusButton
          >
        </Form>
      </cus-search-item>
    </cus-search>
    <cus-card class="mt_20" :showTitle="false" style="padding: 20px 20px">
      <cusTable
        border
        :loading="loading"
        :columns="columns"
        :data="data"
        :size="vuex_config.tableSize"
        :bottomClass="['cus-page']"
      >
        <template slot-scope="{ row }" slot="operation">
          <div class="flex">
            <cus-button
              type="text"
              size="small"
              :style="{ color: '#1E6FFF', padding: '0 8px' }"
              @onClick="onDetail(row)"
            >
              查看
            </cus-button>
          </div>
        </template>
      </cusTable>
      <div class="cus_page">
        <cus-page
          :data="pages"
          class="mt_20"
          @pageChange="getPoinventroyConsumeListApi()"
        ></cus-page>
      </div>
    </cus-card>
    <!-- 查看详情 -->
    <consumptionDetails ref="consumptionDetails"></consumptionDetails>
  </div>
</template>
<script>
import {
  getPoinventroyConsumeList,
  getApiGoodsHandaworkSuppliername,

} from "@/api/business/manager";
import {
  productcategory,
} from "@/api/business/dishesModule";
import consumptionDetails from "./components/consumptionDetails.vue";
import moment from "moment";
// require 方式
require("moment/locale/zh-cn");
moment.locale("zh-cn", {
  week: {
    dow: 1
  }
});
// import 方式
import "moment/locale/zh-cn";
moment.locale("zh-cn");
export default {
  components: { consumptionDetails },
  data() {
    return {
      loading: false,
      dateStr: [],
      form: {
        startDate: "", // 开始日期
        stopDate: "", // 结束日期
        goodsTypeName: "", // 物资分类
        productName: "" // 物资名称
      },
      materialTypeList: [], // 物资分类tree数据
      ruleValidate: {},
      columns: [
        {
          title: "序号",
          type: "index",
          align: "center",
          width: 70
        },
        {
          title: "物资编码",
          key: "goodsCode",
          minWidth: 100,
          align: "center"
        },
        {
          title: "物资名称",
          key: "goodsName",
          minWidth: 100,
          align: "center"
        },
        {
          title: "物资分类",
          key: "goodsTypeName",
          minWidth: 100,
          align: "center"
        },
        {
          title: "消耗数量",
          key: "packagingQty",
          minWidth: 100,
          align: "center"
        },
        {
          title: "计量单位",
          key: "packagingUtil",
          minWidth: 100,
          align: "center"
        },
        // {
        //   title: "消耗重量",
        //   key: "qtyTotal",
        //   minWidth: 100,
        //   align: "center"
        // },
        {
          title: "单位重量(Kg)",
          key: "unitWeight",
          minWidth: 110,
          align: "center"
        },
        {
          title: "单价(元)",
          key: "packagingPrice",
          minWidth: 100,
          align: "center"
        },
        {
          title: "金额合计(元)",
          key: "amountTotal",
          minWidth: 100,
          align: "center"
        },
        {
          title: "操作",
          fixed: "right",
          slot: "operation",
          align: "center",
          width: 145
        }
      ],
      data: [],
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0
      },
      tableHeight: 0
    };
  },
  mounted() {
    setTimeout(() => {
      this.tableHeight = window.innerHeight - 370; // 表格自适应高度
    }, 100);
    window.addEventListener("resize", this.tableHeightChange, true);
    this.onInit();
  },
  destroyed() {
    window.removeEventListener("resize", this.tableHeightChange, true);
  },
  methods: {
    tableHeightChange() {
      this.tableHeight = 0;
      setTimeout(() => {
        this.tableHeight = window.innerHeight - 370; // 表格自适应高度
      }, 100);
    },
    onInit() {
      this.getCurrentWeek();
      this.productcategoryApi();
      this.getApiGoodsHandaworkSuppliernameApi();
      this.getPoinventroyConsumeListApi();
    },
    // DatePicker事件(起止日期)
    sDateChange(date) {
      (this.form.startDate = date[0]), //开始日期
        (this.form.stopDate = date[1]); //结束日期
    },
    reset() {
      this.$refs["formValidate"].resetFields();
      this.getCurrentWeek();
      this.onInit();
    },
    onDetail(row) {
      console.log(row);
      this.$refs["consumptionDetails"].show();
      this.$refs["consumptionDetails"].form.goodsName = row.goodsName;
      this.$refs["consumptionDetails"].form.goodsCode = row.goodsCode;
      (this.$refs["consumptionDetails"].form.unitWeight = row.unitWeight),
        (this.$refs["consumptionDetails"].form.packagingPrice = row.packagingPrice),
        (this.$refs["consumptionDetails"].form.packagingUtil = row.packagingUtil);
    },
    // 获取供应商名称
    getApiGoodsHandaworkSuppliernameApi() {
      return new Promise(resolve => {
        getApiGoodsHandaworkSuppliername().then(res => {
          if (res.retCode == 2000) {
            this.supplyTree = res.data;
          }
          resolve();
        });
      });
    },
    // 获取物资分类-----------------接口
    productcategoryApi() {
      return new Promise(resolve => {
        productcategory().then(res => {
          if (res.retCode == 2000) {
            this.materialTypeList =res.data.records;
            resolve();
          }
        });
      });
    },
    // 消耗汇总一级列表------------接口
    getPoinventroyConsumeListApi() {
      return new Promise(resolve => {
        let params = {
          startDate: this.form.startDate,
          stopDate: this.form.stopDate,
          goodsTypeName: this.form.goodsTypeName,
          goodsName: this.form.productName,
          stockId: this.form.stockId,
          current: this.pages.page,
          size: this.pages.pageSize
        };
        getPoinventroyConsumeList(params).then(res => {
          if (res.retCode == 2000) {
            this.data = res.data.records;
            this.pages.pageTotal = res.data.total;
            resolve();
          }
        });
      });
    },
    getCurrentWeek() {
      let start = moment()
        .weekday(0)
        .format("YYYY-MM-DD"); //本周一
      let end = moment()
        .weekday(6)
        .format("YYYY-MM-DD"); //本周日
      (this.form.startDate = start), //默认一周开始时间
        (this.form.stopDate = end); //默认一周结束时间
      this.dateStr = [start, end];
      console.log(start, end);
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .ivu-select-large.ivu-select-single .ivu-select-selection .ivu-select-placeholder {
  font-size: 14px;
}
.btnBox {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
</style>
